import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import postcssPxtorem from "postcss-pxtorem";

// defineConfig 是 Vite 提供的一个函数，用于定义项目的配置对象
export default defineConfig({
  // vue() 用于支持 Vue 单文件组件（.vue 文件）
  plugins: [vue()],
  server: {
    // 配置服务器选项
    open: true, // 在服务器启动时自动打开浏览器
    host: "127.0.0.1", // 配置服务器监听的主机地址
    port: 5173, // 配置服务器监听的端口号
  },
  css: {
    postcss: {
      plugins: [
        postcssPxtorem({
          rootValue: 30,
          minPixelValue: 1, // 小于或等于2px的不转换为rem
          propList: ["*"], // 需要转换的属性列表
        }),
      ],
    },
  },
  // resolve用于配置模块解析的选项
  resolve: {
    // alias(别名) 用于配置路径别名
    alias: {
      // import.meta.url 是一个特殊的变量，它返回当前模块的 URL
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});
